<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问个人主页</title>
    <script src="../static/js/axios.js"></script>
    <link rel="icon" href="../static/imgs/cms.png" type="image/png">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/OtherPersonalCenter.css">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示！！!</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--导航栏--->
<nav class="navbar navbar-default nav_bottom">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#" style="font-weight: bold;color: #999999;font-size: 25px">访问用户</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--竖导航栏、个人信息栏、编辑信息栏-->
<div class="container">
    <div class="row">
        <!--竖导航栏-->
        <div class="col-md-2" >
            <div class="row">
                <div class="col-md-11" style="background-color: white;height: 230px;position: fixed;width:180px">
                    <ul class="nav nav-pills nav-stacked" style="width: 150px;padding-top: 10px;padding-left: 2px">
                        <li class="active nav-personal-info"><a href="#" >个人资料</a></li>
                        <li class="nav-following"><a href="#"><span class="nav-style">TA</span>的关注</a></li>
                        <li class="nav-fans"><a href="#"><span class="nav-style">TA</span>的粉丝</a></li>
                        <li class="nav-collection"><a href="#"><span class="nav-style">TA</span>的收藏</a></li>
                        <li class="nav-blog"><a href="#"><span class="nav-style">TA</span>的博客</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--个人资料界面-->
        <div class="col-md-10 personal-info" >
            <div class="row" style="background-color: white">
                <div class=" col-md-6 personal-message-top" style="height: 150px">
                      <div class="headpicture-box">
                          <img src="../warehouse/默认头像.png"  alt="" class="headpicture">
                      </div>
                    <div class="top-info-box">
                        <div class="top-nickname">

                        </div>
                        <div class="top-info">
                            <div class="top-fans-number top-number">
                                <span class="top-info-tail top-fans">-</span>粉丝
                            </div>
                            <div class="top-following-number top-number">
                                <span class="top-info-tail top-following">-</span>关注
                            </div>
                            <div class="top-praise-number top-number">
                                <span class="top-info-tail top-support">-</span>获赞
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="row" style="background-color: white">
                <div class="col-md-12 personal-message-bottom" style="height:570px;">
                    <div style="border-bottom: 1px solid rgb(221, 221, 221)">
                        <h4 style="font-weight: bold">基本信息</h4>
                    </div>
                    <div class="base-msg">
                        <!--展示个人基本信息-->
                        <div class="base-msg-out" style="" >
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>昵</span>
                                    <span>称</span>
                                </div>
                                <div class="base-msg-right" id="msg-nickname"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>用</span>
                                    <span>户</span>
                                    <span>ID</span>
                                </div>
                                <div class="base-msg-right" id="msg-username"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>邮</span>
                                    <span>箱</span>
                                </div>
                                <div class="base-msg-right" id="msg-mailbox"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>性</span>
                                    <span>别</span>
                                </div>
                                <div class="base-msg-right" id="msg-gender"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>出</span>
                                    <span>生</span>
                                    <span>日</span>
                                    <span>期</span>
                                </div>
                                <div class="base-msg-right" id="msg-borndate"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>所</span>
                                    <span>在</span>
                                    <span>地</span>
                                    <span>区</span>
                                </div>
                                <div class="base-msg-right" id="msg-region"></div>
                            </div>
                            <div class="base-msg-one">
                                <div class="base-msg-left">
                                    <span>个</span>
                                    <span>人</span>
                                    <span>简</span>
                                    <span>介</span>
                                </div>
                                <div class="base-msg-right" id="msg-intro">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--TA的关注界面-->
        <div class="col-md-10 following-page">
              <!--我的关注标题-->
            <div class="following-title">
                 <div class="following-title-icon">
                     <img src="../static/imgs/我的关注.png" alt="" style="height: 40px;width: 40px">
                 </div>
                 <div class="following-title-msg">
                    TA 的关注
                </div>
            </div>
            <!--分割线-->
            <div style="height: 1px;width: 100%;margin-bottom: 5px">
                <hr style="height: 100%">
            </div>
            <!--关注列表-->
            <div class="following-list">
            </div>
        </div>

        <!--TA的粉丝界面-->
        <div class="col-md-10 fans-page">
            <!--我的关注标题-->
            <div class="following-title">
                <div class="following-title-icon">
                    <img src="../static/imgs/我的关注.png" alt="" style="height: 40px;width: 40px">
                </div>
                <div class="following-title-msg">
                    TA 的粉丝
                </div>
            </div>
            <!--分割线-->
            <div style="height: 1px;width: 100%;margin-bottom: 5px">
                <hr style="height: 100%">
            </div>
            <!--粉丝列表-->
            <div class="fans-list">

            </div>
        </div>

        <!--TA的收藏界面-->
        <div class="col-md-10 my-collection">
            <div class=" my-collection-box">
                <div class="my-collection-title-box">
                    我的收藏
                </div>
                <div class="collection-list">
                    <div class="collection-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="recent-article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--TA的博客界面-->
        <div class="col-md-10 my-blog">
            <div class=" my-blog-box">
                <div class="my-blog-title-box">
                    博客列表
                </div>
                <div class="blog-list">
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item blog-item" blog_id="">
                        <div class="recent-article-left">
                            <div class="recent-article-icon">
                                博客
                            </div>
                            <div class="recent-article-info">
                                <div class="article-in-title">
                                    <a href="#">文章标题</a>
                                </div>
                                <div class="recent-article-content">
                                    文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                </div>
                            </div>
                        </div>
                        <div class="recent-article-right">
                            <div class="recent-article-comment recent-article-attribute">
                                <div class="recent-article-comment-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    评论数
                                </div>
                            </div>
                            <div class="recent-article-support recent-article-attribute">
                                <div class="recent-article-support-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    点赞数
                                </div>
                            </div>
                            <div class="recent-article-collection recent-article-attribute">
                                <div class="recent-article-collection-info recent-article-in-info">
                                    0
                                </div>
                                <div class="recent-article-show">
                                    收藏数
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    /*初始化函数中获取基本信息*/
    $(function () {
        let url='http://localhost:8080/userServlet?action=get_invite_info'
        axios({
            method:"GET",
            url:url,
            params:{
                invite_id:window.localStorage.getItem("invite_id")
            }
        }).then(function (res) {
              console.log(res);
            let data = res['data'];
            $("#msg-nickname").html(data['data']['nickname']);
            $(".top-nickname").html(data['data']['nickname']);
            $('#msg-username').html(data['data']['username']);
            $('#msg-mailbox').html(data['data']['mailbox']);
            $(".headpicture").attr("src", data['data']['headpicture']);
            var gender_info = data['data']['gender'];
            if (gender_info === "male") {
                $('#msg-gender').html("男");
            } else {
                $('#msg-gender').html("女");
            }
            $('#msg-borndate').html(data['data']['borndate']);
            if (data['data']['region'] == null) {
                $('#msg-region').html("未知星球");
            } else {
                $('#msg-region').html(data['data']['region']);
            }
            if (data['data']['intro'] == null) {
                $('#msg-intro').html("这个人很懒,啥也没说");
            } else {
                $('#msg-intro').html(data['data']['intro']);
            }
            get_invite_success();
        })
    })

    function get_invite_success() {
        let url='http://localhost:8080/userServlet?action=get_user_success'
        axios({
            method:"GET",
            url:url,
            params:{
                email:window.localStorage.getItem("invite_id")
            }
        }).then(function (res) {
            let data = res['data'];
            $(".top-fans").html(data['data']['fans_number']);
            $(".top-following").html(data['data']['following_number']);
            $(".top-nickname").html(data['data']['nickname']);
            $(".top-support").html(data['data']['support_number']);
        })
    }

    /*关注列表构造器*/
    function push_concern_list(data) {
        $(".following-list").append(`<div class="my-concern-list-item">
                     <div class="my-concern-list-content">
                         <div class="concern-item-head-box">
                             <img src=
                             ${data['headpicture']}
                               class="concern-list-item-head" alt="">
                         </div>
                         <div class="concern-item-nickname-box">
                             <div class="concern-item-nickname" followingid=${data['following_id']}>
                             <a href="#" style="text-decoration: none">${data['following_nickname']}</a>
                            </div>
                             <div class="concern-item-intro">
                             ${data['intro']}
                            </div>
                         </div>
                     </div>
                 </div>`);
    }

    /*粉丝列表构造器*/
    function push_fans_list(data) {
        $(".fans-list").append(`<div class="my-fans-list-item">
                    <div class="my-fans-list-content">
                        <div class="fans-item-head-box">
                            <img src=
                    ${data['headpicture']}
                    class="fans-list-item-head" alt="">
                        </div>
                        <div class="fans-item-nickname-box">
                            <div class="fans-item-nickname" fansid=${data['fans_id']}>
                              <a style="text-decoration: none" href="#">${data['fans_nickname']}</a>
                            </div>
                           <div class="fans-item-intro">
                               ${data['intro']}
                           </div>
                        </div>
                    </div>
                </div>`);
    }

    /*展示收藏列表*/
    function push_collection_list(data) {
        $(".collection-list").append(`<div class="collection-item" >
                      <div class="recent-article-left">
                          <div class="recent-article-icon">
                              博客
                          </div>
                          <div class="recent-article-info">
                              <div class="recent-article-in-title" blog_id=${data['id']}>
                                  <a href="#">${data['article_title']}</a>
                              </div>
                              <div class="recent-article-content">
                                  ${data['content_text']}
                              </div>
                          </div>
                      </div>
                      <div class="recent-article-right">
                          <div class="recent-article-comment recent-article-attribute">
                              <div class="recent-article-comment-info recent-article-in-info">
                                  ${data['comment_count']}
                              </div>
                              <div class="recent-article-show">
                                  评论数
                              </div>
                          </div>
                          <div class="recent-article-support recent-article-attribute">
                              <div class="recent-article-support-info recent-article-in-info">
                                  ${data['support_count']}
                              </div>
                              <div class="recent-article-show">
                                  点赞数
                              </div>
                          </div>
                          <div class="recent-article-collection recent-article-attribute">
                              <div class="recent-article-collection-info recent-article-in-info">
                                  ${data['collection_count']}
                              </div>
                              <div class="recent-article-show">
                                  收藏数
                              </div>
                          </div>
                      </div>
                  </div>`);
    }

    /*展示博客列表*/
    function push_blog_list(data) {
        $(".blog-list").append(`<div class="collection-item blog-item" >
                      <div class="recent-article-left">
                          <div class="recent-article-icon">
                              博客
                          </div>
                          <div class="recent-article-info">
                              <div class="article-in-title" blog_id=${data['id']}>
                                  <a href="#">${data['article_title']}</a>
                              </div>
                              <div class="recent-article-content">
                                  ${data['content_text']}
                              </div>
                          </div>
                      </div>
                      <div class="recent-article-right">
                          <div class="recent-article-comment recent-article-attribute">
                              <div class="recent-article-comment-info recent-article-in-info">
                                  ${data['comment_count']}
                              </div>
                              <div class="recent-article-show">
                                  评论数
                              </div>
                          </div>
                          <div class="recent-article-support recent-article-attribute">
                              <div class="recent-article-support-info recent-article-in-info">
                                  ${data['support_count']}
                              </div>
                              <div class="recent-article-show">
                                  点赞数
                              </div>
                          </div>
                          <div class="recent-article-collection recent-article-attribute">
                              <div class="recent-article-collection-info recent-article-in-info">
                                  ${data['collection_count']}
                              </div>
                              <div class="recent-article-show">
                                  收藏数
                              </div>
                          </div>
                      </div>
                  </div>`);
    }

    /*监听滚动条*/
    $(window).scroll(function () {
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
             if($(".nav-blog").hasClass("active")){
                   if($(".blog-item").length%8!==0){
                       return;
                   }
                   get_blog_list();
             }
        }
    })

    /*竖导航栏切换状态*/
    {   /*个人资料*/
        $(".nav-personal-info").click(function () {
            $(".active").removeClass("active");
            $(".nav-personal-info").addClass("active");
            judeclass();
        })
        /*TA的关注*/
        $(".nav-following").click(function () {
            get_following_list();
            $(".active").removeClass("active");
            $(".nav-following").addClass("active");
            judeclass();
        })
        /*TA的粉丝*/
        $(".nav-fans").click(function () {
            get_fans_list();
            $(".active").removeClass("active");
            $(".nav-fans").addClass("active");
            judeclass();
        })
        /*TA的收藏*/
        $(".nav-collection").click(function () {
            get_collection_list();
            $(".active").removeClass("active");
            $(".nav-collection").addClass("active");
            judeclass();
        })
        /*TA的博客*/
        $(".nav-blog").click(function () {
            $(".blog-list").empty();
            get_blog_list();
            $(".active").removeClass("active");
            $(".nav-blog").addClass("active");
            judeclass();
        })
    }

    /*获取粉丝列表*/
    function get_fans_list() {
        let url='http://localhost:8080/userServlet?action=get_invite_fans_list'
        axios({
            method:"GET",
            url:url,
            params:{
                invite_id: window.localStorage.getItem("invite_id")
            }
        }).then(function (res) {
            console.log(res);
            let data1=res['data']['data'];
            $(".fans-list").empty();
            for(let i=-0;i<data1.length;i++)
            {
                push_fans_list(data1[i]);
            }
        })
    }

    /*获取关注列表*/
    function get_following_list() {
        let url='http://localhost:8080/userServlet?action=get_invite_following_list'
        axios({
            method:"GET",
            url:url,
            params:{
                invite_id:window.localStorage.getItem("invite_id")
            }
        }).then(function (res) {
            console.log(res);
            let data1=res['data']['data'];
            $(".following-list").empty();
            for(let i=-0;i<data1.length;i++)
            {
             push_concern_list(data1[i]);
            }
        })
    }

    /*获取收藏列表*/
    function get_collection_list() {
        let url='http://localhost:8080/articleServlet?action=get_collection_list'
        axios({
            method: "GET",
            url:url,
            params: {
                email:window.localStorage.getItem("invite_id")
            }
        }).then(function (res) {
            console.log(res);
            let data1=res['data']['data'];
            $(".collection-list").empty();
            for(let i=0;i<data1.length;i++){
                push_collection_list(data1[i]);
            }
            /*查看博客*/
            $(".recent-article-in-title").click(function () {
                window.open("ViewBlog.html?blog_id="+$(this).attr("blog_id"));
            })
        })
    }

    /*获取博客列表*/
    function get_blog_list() {
        let page_number=$(".blog-item").length/8;
        let url='http://localhost:8080/articleServlet?action=get_content_blog'
        axios({
            method:"GET",
            url:url,
            params:{
                email:window.localStorage.getItem("invite_id"),
                year:"不限",
                month:"不限",
                article_type:"不限",
                article_column:"不限",
                article_title:"",
                page_number:page_number
            }
        }).then(function (res) {
               console.log(res);
            let data1=res['data']['data'];
            for(let i=0;i<data1.length;i++){
                push_blog_list(data1[i]);
            }
            /*查看博客*/
            $(".article-in-title").click(function () {
                window.open("ViewBlog.html?blog_id="+$(this).attr("blog_id"));
            })
        })
    }

    /*竖导航栏更新页面*/
    function judeclass() {
             if($(".nav-personal-info").hasClass("active")){
                 $(".personal-info").show();
             }else{
                 $(".personal-info").hide();
             }
             if($(".nav-following").hasClass("active")){
                 $(".following-page").show();
             }else{
                  $(".following-page").hide();
             }
             if($(".nav-fans").hasClass("active")){
                 $(".fans-page").show();
             }else{
                 $(".fans-page").hide();
             }
             if($(".nav-collection").hasClass("active")){
                 $(".my-collection").show();
             }else{
                 $(".my-collection").hide();
             }
             if($(".nav-blog").hasClass("active")){
                 $(".my-blog").show();
             }else{
                 $(".my-blog").hide();
             }
    }

    /*模态框函数*/
    function modal(content) {
        $('.modal-body').html(content);
        $("#myModal").modal("show");
    }

    /*logo*/
    $(".navbar-brand").click(function () {
        location.href="Home.html";
    })
</script>
</body>
</html>